if (hexo-config('preloader.on') && hexo-config('preloader.type') == '5') {
  .preloader_5 {
    position: fixed;
    z-index: 1000;
    width: 100vw;
    height: 100vh;
    background: #212121;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;

    &#loader.loading {
      display: none;
    }

    .cube {
      position: relative;
      width: 300px;
      height: 300px;
      transform-style: preserve-3d;
      transform: rotateX(-30deg);
      animation: animateD 8s linear infinite;
    }

    @keyframes animateD {
      0% {
        transform: rotateX(-15deg) rotateY(0deg);
      }

      100% {
        transform: rotateX(-15deg) rotateY(-360deg);
      }
    }

    .cube div {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
    }

    .cube2 {
      position: relative;
      width: 150px;
      height: 150px;
      transform-style: preserve-3d;
      animation: animateD2 5s ease-out infinite alternate;
    }

    @keyframes animateD2 {
      0% {
        transform: rotateX(0deg) rotateY(0deg);
      }

      100% {
        transform: rotateX(180deg) rotateY(-360deg);
      }
    }

    .cube2 div {
      position: absolute;
      top: 35px;
      left: 0;
      width: 65%;
      height: 65%;
      transform-style: preserve-3d;
    }

    .cube2 div span {
      position: absolute;
      top: 20%;
      left: 20%;
      width: 65%;
      height: 65%;
      background: transparent;
      border: 2px solid $color-primary;
      transform: rotateY(calc(90deg * var(--i))) translateZ(62px);
    }

    .cube3 {
      position: absolute;
      width: 300px;
      height: 300px;
      transform-style: preserve-3d;
      transform: rotateX(-30deg);
      animation: animateD3 1s ease-in-out infinite alternate;
    }

    @keyframes animateD3 {
      0% {
        transform: rotateX(-90deg) rotateY(0deg);
      }

      100% {
        transform: rotateX(90deg) rotateY(45deg);
      }
    }

    .cube3 div {
      position: absolute;
      top: 70px;
      left: 70px;
      width: 15%;
      height: 15%;
      transform-style: preserve-3d;
    }

    .cube3 div span {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: $color-primary;
      transform: rotateY(calc(90deg * var(--i))) translateZ(14px);
      box-shadow: 0px 0px 7px $color-primary;
    }

    .top3 {
      position: absolute;
      top: 0;
      left: 0;
      background: $color-primary;
      transform: rotateX(90deg) translateZ(14px);
      box-shadow: 0px 0px 10px $color-primary;
    }
  }
}
